<template>
	<view class="container">
		<!--Tabs标签-->
		<template>
			<u-tabs :list="list1" @click="tabClick"></u-tabs>
		</template>
		<!--轮播图-->
		<view class="u-demo-block">
			<u-swiper
		         :list="list3"
				 previousMargin="30"
				 nextMargin="30"
				 circular
				 :autoplay="false"
				 radius="5"
				 bgColor="#ffffff"
			></u-swiper>
		</view>
		<!--宫格布局-->
		<view class="gridView">
			<u-grid
					:border="false"
					col="4"
			>
				<u-grid-item
						v-for="(listItem,listIndex) in girdList"
						:key="listIndex"
				>
					<u-icon
							:customStyle="{paddingTop:20+'rpx'}"
							:name="listItem.name"
							:size="22"
					></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!--图片广告位-->
		<view class="advert">
			<u--image class="advert-img" :showLoading="true"
					  src="https://cdn.uviewui.com/uview/album/1.jpg"
					  @click="click"
					  width="342px" height="auto"  mode="widthFix">
			</u--image>
		</view>
		<!--商品列表-->
		<view class="gridView">
			<u-grid
					:border="false"
					col="2"
			>
				<u-grid-item
						v-for="goods in goodsList"
						@click="goodsToPage(goods.mallGoods.id)"
				>
					<view class="goodsViews" >
						<img :src="goods.picUrl" width="100%">
						<view style="padding: 5px">
							<u--text  :text="goods.mallGoods.name" style="font-size: 8px"></u--text>
							<u--text mode="price" :text="goods.mallGoods.price" style="font-size: 8px"></u--text>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!--底部导航杠-->
		<u-tabbar
				class="footbar"
				:value="value1"
				:fixed="false"
				:placeholder="false"
				:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="首页" icon="home"  @click="barToPage('/')" ></u-tabbar-item>
			<u-tabbar-item text="分类" icon="list" @click="barToPage('/pages/sjh/goodsSort')" ></u-tabbar-item>
			<u-tabbar-item text="购物车" icon="shopping-cart" @click="barToPage('/pages/sjh/shoppingCart')" ></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="barToPage('/pages/sjh/own')" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import Request from '../../utils/request'
	export default {
		data() {
			return {
				girdList: [
					{
						name: 'coupon',
						title: '领券中心'
					},
					{
						name: 'integral',
						title: '超金会员'
					},
					{
						name: 'bell',
						title: '限时秒杀'
					},
					{
						name: 'home',
						title: '线上门店'
					},
				],
				goodsList:[
					// {
					// 	picUrl:'https://demo-sjh.oss-cn-beijing.aliyuncs.com/images/2022/07/06/16571059838815508.png',
					// 	name:'手机',
					// 	price:15
					// },{
					// 	picUrl:'https://demo-sjh.oss-cn-beijing.aliyuncs.com/images/2022/07/06/16571059838815508.png',
					// 	name:'手机',
					// 	price:15
					// },{
					// 	picUrl:'https://demo-sjh.oss-cn-beijing.aliyuncs.com/images/2022/07/06/16571059838815508.png',
					// 	name:'手机',
					// 	price:15
					// },{
					// 	picUrl:'https://demo-sjh.oss-cn-beijing.aliyuncs.com/images/2022/07/06/16571059838815508.png',
					// 	name:'手机',
					// 	price:15
					// },{
					// 	picUrl:'https://demo-sjh.oss-cn-beijing.aliyuncs.com/images/2022/07/06/16571059838815508.png',
					// 	name:'手机',
					// 	price:15
					// },{
					// 	picUrl:'https://demo-sjh.oss-cn-beijing.aliyuncs.com/images/2022/07/06/16571059838815508.png',
					// 	name:'手机',
					// 	price:15
					// },
				],
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				value1:0,
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
			}
		},
		created(){
			this.loadColumnList()
			this.getGoodsList()
		},
		methods: {
			/*底部导航跳转页面*/
			barToPage(url){
				//console.log(url)
				uni.navigateTo({
					url: url
				});
			},
			/*跳转商品的详细信息*/
			goodsToPage(goodsId){
				uni.setStorageSync("goodsId",goodsId)
				uni.navigateTo({
					url: '/pages/sjh/goodsDetail'
				});
			},
			tabbarChange(e){
				console.log('click1', e);
			},
			click1(e) {
				console.log('click1', e);
			},
			tabClick(item){
				console.log('item', item);
			},
			/*获取栏目信息*/
			loadColumnList(){
				Request.request("management-mall/column/columnList","","post").then(res=>{
					console.log(res)
					this.list1=res.data.list
				}).catch(error=>{
					console.error(error)
				})
			},
			/*获取商品列表*/
			getGoodsList(){
				let json={
					"page":1,
					"limit":8
				}
				Request.requestForJSON("management-mall/leyou.mall/mall-goods/phoneGoodsList",
				JSON.stringify(json),'post').then(res=>{
					console.log(res)
					this.goodsList=res.data.data
				}).catch(error=>{

					console.log(error)
				})
			}


		}
	}
</script>

<style>
	.container {
		padding-bottom: 60px;
		font-size: 14px;
		line-height: 24px;
	}
	.u-demo-block{
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.footbar{
		margin: 0;
		width: 360px;
		position: fixed;
		bottom: 0;
	}
	.advert{
		width:342px;
		height:90px;
		margin-left: 3%;
		overflow: hidden;
		position: relative;
	}
	.advert-img{
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.gridView{
		font-size: 10px;
		margin: 10px;
		background: rgba(188,174,174,0.3);
	}
	.goodsViews{
		background: rgba(185,152,57,0.5);
		margin: 5px;
		border-radius: 10px;
		overflow: hidden;
	}
</style>
